<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-08 17:05:55
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiSwitch\uiSwitch.vue
 * CIMC-V2
-->
<template>
  <el-checkbox
    v-if="info.extension.modelStyle && info.extension.modelStyle.value === 'rectangle'"
    v-model="formDataItem[formDataKey]"
    :disabled="disabled"
    :false-label="info.extension.inactiveValue.value"
    size="large"
    :true-label="info.extension.activeValue.value"
    @change="handleChange"
  />
  <el-switch
    v-else
    v-model="formDataItem[formDataKey]"
    :active-value="info.extension.activeValue.value"
    :disabled="disabled"
    :inactive-value="info.extension.inactiveValue.value"
    @change="handleChange"
  />
</template>
<script>
  import { defineComponent } from 'vue'
  import { tableFormItemMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiTableSwitch',
    components: {},
    mixins: [tableFormItemMixin],
    data() {
      return {}
    },
    created() {},
    methods: {
      handleChange(newVal) {
        if (this.formDataKey !== this.formDataLabel) {
          if (newVal === this.info.extension.activeValue.value) {
            this.formDataItem[this.formDataLabel] = this.info.extension.activeText ? this.info.extension.activeText.value : ''
          } else {
            this.formDataItem[this.formDataLabel] = this.info.extension.inactiveText ? this.info.extension.inactiveText.value : ''
          }
        }
      },
    },
  })
</script>
<style lang="scss" scoped></style>
